<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
</head>
<body>

<input type="text" id="content">
<button type="button" id="add-btn">添加</button>

<h1 id="todo-h1">待办事项<span></span></h1>
<ul id="todo-ul">
</ul>

<h1 id="finished-h1"> 已完成 <span></span></h1>
<ul id="finished-ul">
  <li>
    <span>1234565</span>
    <button type="button">删除</button>
  </li>
  <li>
    <span>1234565</span>
    <button type="button">删除</button>
  </li>
</ul>

<script>
 var content = document.getElementById('content')
 var addBtn = document.getElementById('add-btn')
 var todoUl = document.getElementById('todo-ul')
 var todoH1 = document.getElementById('todo-h1')
  addBtn.onclick = function (){
      addTodo()
  }
 var enterKeyCode = 13;
 content.onkeyup = function (e) {
   if (e.keyCode == enterKeyCode) {
     addTodo()
   }
 }

var todos = [];
   function renderTodos(){
     var html =''
     for (var i = 0; i < todos.length;i++) {
       var todo = todos[i]
       html +='<li>\n' +
               '    <span>' + todo + '</span>\n' +
               '    <button type="button" class="add-finish" onclick="addFinish('+ i +')">完成</button>\n' +
               '    <button type="button">删除</button>\n' +
               '  </li>'
     }
     todoUl.innerHTML = html;
     todoH1.firstElementChild.innerText = '( '+ todos.length +')'
   }


   renderTodos();
   function addTodo() {
     var value = content.value;
     if (!value.trim()) {
       alert('请输入内容')
       return
     }
todos.push(value);
     renderTodos();
     content.value ='';
   }
   var finishedUl = document.getElementById('finished-ul')
 var finishedH1 = document.getElementById('finished-h1')
 var finished =[]
 function renderFinished(){
   var html =''
   for (var i = 0; i < finished.length;i++) {
     var f = finished[i]
     html +='<li>\n' +
             '    <span>'+ f +'</span>\n' +
             '    <button type="button">删除</button>\n' +
             '  </li>'
   }
   finishedUl.innerHTML = html;
 finishedH1.firstElementChild.innerText = '( '+ finished.length +')'
 }
 renderFinished()
 function addFinish (index){
 finished.push(todos[index])
   renderFinished()
   todos.splice(index,1)
   renderTodos()
 }

</script>
</body>
</html>
